<div class="card">
   <div class="icons"> 
      <button class="save">
      <svg class="save__icon" viewBox="0 0 20 20"><path d="M8.416,3.943l1.12-1.12v9.031c0,0.257,0.208,0.464,0.464,0.464c0.256,0,0.464-0.207,0.464-0.464V2.823l1.12,1.12c0.182,0.182,0.476,0.182,0.656,0c0.182-0.181,0.182-0.475,0-0.656l-1.744-1.745c-0.018-0.081-0.048-0.16-0.112-0.224C10.279,1.214,10.137,1.177,10,1.194c-0.137-0.017-0.279,0.02-0.384,0.125C9.551,1.384,9.518,1.465,9.499,1.548L7.76,3.288c-0.182,0.181-0.182,0.475,0,0.656C7.941,4.125,8.234,4.125,8.416,3.943z M15.569,6.286h-2.32v0.928h2.32c0.512,0,0.928,0.416,0.928,0.928v8.817c0,0.513-0.416,0.929-0.928,0.929H4.432c-0.513,0-0.928-0.416-0.928-0.929V8.142c0-0.513,0.416-0.928,0.928-0.928h2.32V6.286h-2.32c-1.025,0-1.856,0.831-1.856,1.856v8.817c0,1.025,0.832,1.856,1.856,1.856h11.138c1.024,0,1.855-0.831,1.855-1.856V8.142C17.425,7.117,16.594,6.286,15.569,6.286z"></path></svg>
      Save 
    </button>
    <button class="see-more">
      <svg viewBox="0 0 20 20" class="see-more__icon">
							<path d="M3.936,7.979c-1.116,0-2.021,0.905-2.021,2.021s0.905,2.021,2.021,2.021S5.957,11.116,5.957,10
								S5.052,7.979,3.936,7.979z M3.936,11.011c-0.558,0-1.011-0.452-1.011-1.011s0.453-1.011,1.011-1.011S4.946,9.441,4.946,10
								S4.494,11.011,3.936,11.011z M16.064,7.979c-1.116,0-2.021,0.905-2.021,2.021s0.905,2.021,2.021,2.021s2.021-0.905,2.021-2.021
								S17.181,7.979,16.064,7.979z M16.064,11.011c-0.559,0-1.011-0.452-1.011-1.011s0.452-1.011,1.011-1.011S17.075,9.441,17.075,10
								S16.623,11.011,16.064,11.011z M10,7.979c-1.116,0-2.021,0.905-2.021,2.021S8.884,12.021,10,12.021s2.021-0.905,2.021-2.021
								S11.116,7.979,10,7.979z M10,11.011c-0.558,0-1.011-0.452-1.011-1.011S9.442,8.989,10,8.989S11.011,9.441,11.011,10
								S10.558,11.011,10,11.011z"></path>
						</svg>
    </button>
    </div>
  <div class="image"></div>
   <div class="card__info">
     <span class="page">BBC</span>
     <a href="#" class="title">Stunning photos as Perseid meteors light up skies</a>
     <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
   </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: hover, card animation, article */
.card {
  width: 300px;
  height: 325px;
  background: #e8e8e8;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: #212121;
  border: 2px solid #ab4b38;
  transition: all .5s ease;
}

.icons {
  display: flex;
  flex-direction: row;
  gap: 5px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.image {
  width: 300px;
  height: 148px;
  background: rgb(223,235,56);
  background: rgb(56,235,226);
  background: linear-gradient(163deg, rgba(56,235,226,1) 0%, rgba(134,221,245,1) 50%);
}

.save {
  background: #eb4b38;
  color: white;
  border: none;
  border-radius: 5px;
}

.see-more {
  background: #ab4b38;
  border: none;
  border-radius: 5px;
  color: white;
}

.save, .see-more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 5px;
}

.save__icon, .see-more__icon {
  width: 15px;
  fill: white;
}

.card__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 15px;
  gap: 3px;
}

.page {
  font-size: 13px;
  font-weight: 100;
}

.title {
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  color: black;
}

.content {
  font-size: 14px;
}

.card:hover {
  box-shadow: 5px 5px 10px 0px #ab4b3866;
}

.card:hover .icons {
  z-index: 1;
  opacity: 1;
}

.card:hover .image {
  filter: brightness(.8);
}

.card:hover .title {
  color: #ab4b38;
}
</style>
